<template>
    <el-form ref="updateForm" label-width="70px" :model="infoForm" :rules="SignUpRules">
      <el-form-item prop="name" label="用户名">
        <el-input v-model="infoForm.name" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="infoForm.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="sex" label="性别">
        <el-radio-group v-model="infoForm.sex">
          <el-radio :label="0">女</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="birth" label="生日">
        <el-date-picker type="date" placeholder="选择日期" v-model="infoForm.birth" style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item prop="introduction" label="签名">
        <el-input type="textarea" placeholder="签名" v-model="infoForm.introduction"></el-input>
      </el-form-item>
      <el-form-item prop="location" label="地区">
        <el-select v-model="infoForm.location" placeholder="地区" style="width: 100%">
          <el-option v-for="item in AREA" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="phone" label="手机">
        <el-input placeholder="手机" v-model="infoForm.phone"></el-input>
      </el-form-item>
      <el-form-item prop="avatar" label="头像">
        <el-upload
            class="avatar-uploader"
            ref="uploadRef" :action="getUrl('/mv/upload')" :auto-upload="true" :data="{type:'avatar'}" :show-file-list="false" :on-success="onSuccess"
        >
            <img v-if="infoForm.avatar" :src="getUrl(infoForm.avatar)" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button @click="goBack(-1)">取消</el-button>
          <el-button type="primary" @click="saveMsg(updateForm)">保存</el-button>
        </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { FormInstance,ElMessage} from 'element-plus';
  import { getUrl } from '@/utils/format';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import { getCurrentInstance, reactive, ref, toRaw } from 'vue';
  import { AREA } from '@/api/types';
  import { updateUserMsg } from '@/api';

  
  const updateForm = ref<FormInstance>();
  const { proxy } = getCurrentInstance();
  const store = useUserStore();
  const { userId,userInfo,changeUserData} =  store;
  // 校验规则
  const SignUpRules = {
    name: [{ required: true, trigger: "blur", min: 3 }],
    password: [{ required: true, trigger: "blur", min: 3 }],
    avatar: [{ message: "avatar", trigger: "change" }],
  };
  const info = toRaw(userInfo)  
   // 修改个人信息
  const infoForm = reactive({...info});
  function saveMsg(formEl: FormInstance | undefined) {
      if (!formEl) return
      formEl.validate(async (valid) => {
          if (valid) {
              await updateUserMsg({id:userId.value,...toRaw(infoForm)});
              changeUserData(infoForm);
              ElMessage.success('修改成功')
      } else {
          ElMessage.error('表单校验失败')
          return false
      }
      })
      
  }

  // 上传头像
  function onSuccess(response:any) {    
    infoForm.avatar = response.data
    console.log(infoForm.avatar,infoForm);
    
  }
  // 取消修改
  function goBack(step = -1) {
    proxy.$router.go(step);
  }
     
  </script>
  
  <style lang="scss" scoped>
  .btn ::v-deep .el-form-item__content {
    display: flex;
    justify-content: center;
  }
  .avatar-uploader{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px dashed #b6b3b3;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .avatar-uploader-icon{
      font-size: 40px;
      color: #ccc
    }
  }
  </style>
  